<template>
    <el-dialog :title="dialogTitle" v-model="visible" show-close draggable center align-center width="50%" height="auto">
        <el-form :model="formData" ref="formRef" label-width="120px">
            <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop" :rules="item.rules">
                <component :is="getComponentType(item).component" v-model="formData[item.prop]" v-bind="getComponentType(item).props"></component>
            </el-form-item>
        </el-form>
        <el-container style="justify-content: center;">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
        </el-container>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElInput, ElSelect, ElInputNumber, ElDatePicker, ElSelectV2 } from 'element-plus';
import type { FormItem } from '@/types/interface';

const visible = ref(false);
const dialogTitle = ref('标题');
const formItems = reactive<FormItem[]>([])
const formData = ref<{[key: string]: any}>({});
const formRef = ref();

let handleCancel = () => {};
let handleSubmit = () => {};
let fetchSuggestions: (field: string) => (queryString: string, cb: (suggestions: { value: string }[]) => void) => void = (field: string) => {
    return (queryString: string, cb: (suggestions: { value: string }[]) => void) => {
        cb([]); // 初始默认返回空数组，模拟没有获取到建议数据的情况
    };
};

function openDialog(options: { title: string; formItems: FormItem[]; handleCancel: () => void; handleSubmit: () =>  Promise<void>; fetchSuggestions: (field: string) => (queryString: string, cb: (suggestions: { value: string }[]) => void) => void; })  {
    dialogTitle.value = options.title;
    Object.assign(formItems, options.formItems);
    formItems.forEach(item => {
        formData.value[item.prop] = item.value;
    });
    handleCancel = options.handleCancel;
    handleSubmit = options.handleSubmit;
    fetchSuggestions = options.fetchSuggestions;
    visible.value = true;
}

function getComponentType(item: FormItem) {
    if (item.prop === 'permission_level') {
        return {
            component: ElSelectV2,
            props: {
                options: [
                    { label: '超级管理员', value: 0 },
                    { label: '普通管理员', value: 1 }
                ],
                clearable: true,
                placeholder: '请选择权限等级'
            }
        };
    }
    if (item.prop === 'gender') {
        return {
            component: ElSelectV2,
            props: {
                options: [
                    { label: '男', value: true },
                    { label: '女', value: false }
                ],
                clearable: true,
                placeholder: '请选择性别'
            }
        };
    }
    if (item.prop.includes('time')) {
        return {
            component: ElDatePicker,
            props: {
                type: 'datetime',
                placeholder: '请选择时间',
                style: { width: '50%' }
            }
        };
    }
    if (item.prop.includes('quantity') || item.prop.includes('id') || item.prop.includes('threshold') ) {
        return {
            component: ElInputNumber,
            props: {
                step: 1,
                stepStrictly: true,
                min: 0,
                placeholder: '请输入数量',
                style: { width: '50%' }
            }
        };
    }
    if (item.prop.includes('price')) {
        return {
            component: ElInputNumber,
            props: {
                step: 0.01,
                stepStrictly: true,
                precision: 2,
                min: 0,
                placeholder: '请输入价格',
                style: { width: '50%' }
            }
        };
    }
    return {
        // component: ElInput,
        component: ElAutocomplete,
        props: {
            placeholder: '请输入内容',
            clearable: true,
            'fetch-suggestions': (queryString: string, callback: (suggestions: { value: string }[]) => void) => fetchSuggestions(item.prop)(queryString, callback),
        }
    };
}

defineExpose({
  openDialog,visible,formItems,dialogTitle,formData,formRef
});
</script>

<style scoped>
/* 样式代码 */
</style>